<template>
  <h2
    @click=";(active = index), ActiveNav()"
    :class="{ active: active === index }"
    v-for="(item, index) in title"
    :key="index"
  >
    {{ item }}
  </h2>
</template>

<script>
import { ref } from 'vue'

function getUserNavTitle() {
  const title = ['播放历史', '追番']

  return {
    title
  }
}

export default {
  name: 'UserNavHeader',
  props: {},
  emits: ['ActiveNav'],
  setup(props, { emit }) {
    const active = ref(0)
    function ActiveNav() {
      emit('ActiveNav', active.value === 0 ? true : false)
    }

    return {
      ...getUserNavTitle(),
      active,
      ActiveNav
    }
  }
}
</script>

<style lang="scss" scoped>
h2 {
  user-select: none;
  cursor: pointer;
  position: relative;
  width: 290px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: $font;
  font-size: 16px;
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background-color: $box_bg;
    z-index: -1;
    transform: translateY(100%);
    opacity: 0.6;
  }
  &:hover::after {
    transition: all 0.25s;
    transform: translateY(75%);
  }
}
.active {
  &::after {
    opacity: 1;
    transform: translateY(0);
  }
  &:hover::after {
    transform: translateY(0);
  }
}
</style>
